<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="margin-bj">
			<view class="item" v-for="(item, key) in bankList" :key="item.id" @tap="checkBank(key)">
				<wanl-bank ref="wanlBank" :bankCode="item.bankCode" :bankName="item.bankName"
					:cardCode="item.cardCode" />
				<view class="choice text-xl" v-if="choice == 1">
					<text class="wlIcon-xuanze-danxuan" v-if="index == key"></text>
					<text class="wlIcon-xuanze" v-else></text>
				</view>
			</view>
		</view>
		<view v-if="bankList.length == 0">
			<wanl-empty text="没找到任何账户" />
		</view>
		<view class="edgeInsetBottom"></view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction"><button @tap="addBank('add')"
				class="cu-btn wanl-bg-orange lg">新增新账户</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankList: [],
				index: null,
				choice: 0
			};
		},
		onLoad(option) {
			this.choice = option.choice;
			this.loadData();

		},
		onShow() {

			this.$nextTick(() => {
				console.log(this.$refs.wanlBank);
			})
		},
		methods: {
			async loadData() {
				this.bankList = []
				this.$api.post({
					url: '/wanlshop/pay/getPayAccount',
					success: res => {
						this.bankList = res;
					}
				});
			},
			async refreshList(data) {
				uni.showLoading({
					title: '更新中..'
				});
				this.$api.post({
					url: '/wanlshop/pay/addPayAccount',
					data: data,
					success: res => {
						this.loadData();
						uni.hideLoading();
						this.$store.commit('statistics/dynamic', {
							accountbank: this.$store.state.statistics.dynamic.accountbank + 1
						});
					}
				});
			},
			addBank(type, item) {
				this.$wanlshop.to(`/pages/user/bank/add?type=${type}&data=${JSON.stringify(item)}`);
			},
			//选择银行卡
			checkBank(key) {
				if (this.choice == 1) {
					this.index = key;
					this.$wanlshop.prePage().bankData = this.bankList[key];
					this.$wanlshop.back(1);
				} else {
					//进入银行卡详情 删除/查看
					this.$wanlshop.to(`/pages/user/bank/details?data=${JSON.stringify(this.bankList[key])}`);
				}
			},
		}
	};
</script>

<style>
	.item {
		position: relative;
	}

	.item .choice {
		color: rgba(255, 255, 255, 0.8);
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.wanlian.cu-bar.tabbar {
		background-color: transparent;
	}

	.wanlian.cu-bar.tabbar .cu-btn {
		width: calc(100% - 50rpx);
	}

	.wanlian.cu-bar.tabbar .cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}
</style>